<template>
	<view>
		<view class="good-flex">
			<block v-for="(item, index) in goodList" :key="index">
				<view class="good-item" @tap="toGoodsDetail(index)">
					<view class="good-image">
						<image :src="item.titlepic" mode="widthFix" ></image>
					</view>
					<view class="good-detail">
						<view class="goods-title">{{ item.title }}</view>
						<view class="goods-desc text-color-h">{{ item.desc }}</view>
						<view class="flex flex-between">
							<view class="">
								<text class="main-text-color font-size-30">￥{{ item.pprice }}</text>
								<text class="margin-left-10 font-size-25 text-color-h">销量{{ item.oprice }}</text>
							</view>
							<view class="iconfont icon-gouwuche3 main-text-color"></view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		goodList: Array
	},
	methods:{
		toGoodsDetail(index){
			uni.redirectTo({
				url:"../../pages/goods-detail/goods-detail?id="+index
			});
		}
	}
};
</script>

<style lang="less">
.good-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 10rpx;
	background: #f6f6f6;
	margin-bottom: 20rpx;
	.good-item {
		width: 362rpx;
		background-color: #ffffff;
		margin-top: 8rpx;
		// box-shadow:5px 5px 5px #F1F1F1,5px -5px 5px #F1F1F1,-5px 5px 5px #F1F1F1,-5px -5px 5px #F1F1F1;
		border: 1rpx solid #f6f6f6;
		border-radius: 5rpx;
		
		.good-detail {
			padding: 0 5rpx;
			.goods-title {
				font-size: 30rpx;
				font-weight: 700;
			}
			.goods-desc {
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.good-image {
			
			display: flex;
			justify-content: center;
			image {
				width: 340rpx;
				border-radius: 10rpx;
				margin-top: 10rpx;
			}
		}
	}
}
</style>
